<div class="layui-container">
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md3">
      <!--            <frame src="leftNav3.html"></frame>-->
      <!--            <iframe name="toppage" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0"  src="leftNav3.html" ></iframe>-->
      <!--            <div id="page1"></div>-->

      <!--  正文    -->
      <div class="layui-side layui-bg-black" style="width: 200px;align-content: flex-start">
        <div class="layui-side-scroll">
          <div title="菜单缩放" class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="false"></i></div>
          <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
          <ul class="layui-nav layui-nav-tree"  lay-filter="test" style="background-color:#2D93CA">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;" style="padding: 0 0px"><i class="fa fa-user-circle-o fa-lg"></i> <span >校园信息</span></a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-list fa-lg"></i> <span >校车信息</span></a></dd>
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-clipboard fa-lg"></i> <span >校园地图</span></a></dd>
                <!--                                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-file-text fa-lg"></i> <span >工做计划</span></a></dd>-->
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;" style="padding: 0 0px"><i class="fa fa-vcard fa-lg"></i> <span >图书管理</span></a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-th-list fa-lg"></i> <span >图书列表</span></a></dd>
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-user-o fa-lg"></i> <span >图书借阅</span></a></dd>
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-send-o fa-lg"></i> <span >图书归还</span></a></dd>
                <!--                                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-frown-o fa-lg"></i> <span >成绩管理</span></a></dd>-->
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;" style="padding: 0 0px"><i class="fa fa-diamond fa-lg"></i> <span >缴费管理</span></a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-address-book fa-lg"></i> <span >网费</span></a></dd>
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-check-square fa-lg"></i> <span >电费</span></a></dd>
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-check-square fa-lg"></i> <span >校园卡</span></a></dd>

              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;" style="padding: 0 0px"><i class="fa fa-gear fa-lg"></i> <span >归寝管理</span></a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-window-restore fa-lg"></i> <span >归寝信息</span></a></dd>
                <!--                                <dd><a href="javascript:;" style="padding: 0 0px"><i class="fa fa-database fa-lg"></i> <span >操作日志</span></a></dd>-->
              </dl>
            </li>
          </ul>
        </div>
      </div>
      <script src="http://localhost:8080/layui/layui.js">
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        var layer = layui.layer ,form = layui.form;
        // layer.msg('Hello Worl');
        layui.use('element', function(){
          var element = layui.element;

          //…
        });

        var isShow = true;  //定义一个标志位
        $('.kit-side-fold').click(function(){
          //选择出所有的span，并判断是不是hidden
          $('.layui-nav-item span').each(function(){
            if($(this).is(':hidden')){
              $(this).show();
            }else{
              $(this).hide();
            }
          });
          //判断isshow的状态
          if(isShow){
            $('.layui-side.layui-bg-black').width(30); //设置宽度
            $('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置
            //将footer和body的宽度修改
            $('.layui-body').css('left', 30+'px');
            $('.layui-footer').css('left', 30+'px');
            //将二级导航栏隐藏
            $('dd span').each(function(){
              $(this).hide();
            });
            //修改标志位
            isShow =false;
          }else{
            $('.layui-side.layui-bg-black').width(200);
            $('.kit-side-fold i').css('margin-right', '10%');
            $('.layui-body').css('left', 200+'px');
            $('.layui-footer').css('left', 200+'px');
            $('dd span').each(function(){
              $(this).show();
            });
            isShow =true;
          }
        });

      </script>
    </div>
  </div>
</div>